import React, {FC, useState} from "react";
import styles from './common.module.scss'
import {useRequest, useTitle} from "ahooks";
import {Empty, Typography, Table, Tag, Space, Button, Modal, Spin, message} from "antd";
import UseLoadQuestionListData from "../../hooks/useLoadQuestionListData";
import ListSearch from "../../components/ListSearch";
import ListPage from "../../components/ListPage";
import {deleteQuestionService, updateQuestionService} from "../../services/question";
import useLoadQuestionListData from "../../hooks/useLoadQuestionListData";

const {Title} = Typography
let confirm = Modal.confirm;

// const rawQuestionList = [
//     {_id: 1, title: '问卷1', isPublished: false, isStar: false, answerCount: 5, createAt: '3月10日 12:30'},
//     {_id: 2, title: '问卷2', isPublished: true, isStar: false, answerCount: 10, createAt: '3月11日 12:30'},
//     {_id: 3, title: '问卷3', isPublished: true, isStar: true, answerCount: 6, createAt: '3月14日 13:30'}
// ]


const Trash: FC = () => {
    useTitle('回收站')
    // const [questionList, setQuestionList] = useState(rawQuestionList);
    const {data = {}, loading, refresh} = useLoadQuestionListData({isDeleted: true})
    const {list = [], total = 0} = data

    const {run: recover} = useRequest(
        async () => {
            for await (const id of selectedIds) {
                await updateQuestionService(id, {isDeleted: false})
            }
        }, {
            manual: true,
            debounceWait: 500,
            onSuccess: () => {
                message.success('恢复成功')
                refresh()
            }
        }
    )

    //恢复

    const [selectedIds, setSelectedIds] = useState<string[]>([])
    const tableColumns = [

        {
            title: '问卷标题',
            dataIndex: 'title',
            key: 'title',
        },
        {
            title: '是否发布',
            dataIndex: 'isPublished',
            key: 'isPublished',
            render: (ispublished: boolean) => {
                return ispublished ? <Tag color="green">已发布</Tag> : <Tag color="red">未发布</Tag>
            }
        }, {
            title: '答卷',
            dataIndex: 'answerCount',
            key: 'answerCount',
        }, {
            title: '创建时间',
            dataIndex: 'createAt',
            key: 'createAt',
        }
    ]

    const {run: deleteQuestion} = useRequest(async () => {
        await deleteQuestionService(selectedIds)
    }, {
        manual: true,
        onSuccess: () => {
            message.success('删除成功')
            refresh()
        }
    })

    function del() {
        confirm({
            title: '确定要删除该问卷吗？',
            content: '删除后，该问卷将无法再被访问',
            okText: '确定',
            cancelText: '取消',
            onOk() {
                message.success('删除成功')
                deleteQuestion()
                setSelectedIds([])
            },
            onCancel() {
                console.log('Cancel');
            },
        })
    }

    const TableElem = <>
        <div style={{marginBottom: '20px'}}>
            <Space>
                <Button type="primary" onClick={recover} disabled={selectedIds.length === 0}>恢复</Button>
                <Button danger disabled={selectedIds.length === 0} onClick={del}>彻底删除</Button>
            </Space>
        </div>
        <Table columns={tableColumns} dataSource={list}
               pagination={false} rowKey={((q: any) => {
            return q._id
        })}
               rowSelection={{
                   type: 'checkbox',
                   onChange: (selectedRowKeys, selectedRows) => {
                       setSelectedIds(selectedRowKeys as string[])
                   }
               }}
        />
    </>


    return (
        <div>
            <div className={styles.header}>
                <div className={styles.left}>
                    <Title level={3}>回收站</Title>
                </div>
                <div className={styles.right}>
                    <ListSearch></ListSearch>
                </div>
            </div>
            <div className={styles.content}>
                {loading && (<div style={{textAlign: 'center'}}><Spin></Spin></div>)}
                {!loading && list.length === 0 && <Empty/>}
                {!loading && list.length > 0 &&
                    TableElem
                }
            </div>
            <div className={styles.footer}>
                <ListPage total={total}></ListPage>
            </div>

        </div>)
}

export default Trash